<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="我要申诉" :extext="extext"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="question-type">
				<view class="question-title">申诉类型</view>
				<view class="type-block">
					<picker @change="bindPickerChange" :value="index" :range="array">
						  <view class="init" v-if="init">请选择申诉类型</view>
							<view class="uni-input" v-else>{{array[index]}}</view>
					</picker>
				</view>
			</view>
			
			<view class="question-detail">
				<view class="question-title">问题描述</view>
				<view class="question-desc">
					<textarea class="desc-text" placeholder="请详细描述你的问题" v-model="contentText"/>
				</view>
			</view>
			
			<view class="question-detail">
				<view class="question-title">上传凭证</view>
				<view class="question-desc">
					<view class="img-box">
						<image v-if="imglist.length<1" src="../../../static/common/pick-img.png" class="pick-img" @tap="closeImgs"></image>
						<image v-else 
						v-for="(item,index) in imglist" :key="index"
						@tap="seeImg(index)"
						:src="item" class="hahah"></image>
					</view>
				</view>
			</view>
			<view class="reset-img" v-if="isSlectedImg">
				<view class="cancle-img" @tap="cancleImg">取消上传</view>
				<view class="confire-img" @tap="closeImgs">重新上传</view>
			</view>
			<view class="attention-text">
				数据表明：很多申诉是因为没有仔细看清楚任务说明导致的，
				因此为了及时有效地处理您的申诉，建议您再次看下任务要
				求，确认没有异议后提交申诉。
			</view>
			
			<image src="../../../static/common/sub-shensu.png" class="shensu-btn" @tap="submitForm"></image>
		</view>
		
	</view>
</template>

<script>
	import commonTitle from'../../../components/titile/title.vue'
	import { pathToBase64, base64ToPath } from '../../../js_sdk/gsq-image-tools/image-tools/index.js'
	export default{
		components:{
			commonTitle
		},
		data () {
			return {
				loadingType: 'more',
				extext:"历史反馈",
				apptoken:"",
				contentText:"",
				type:1,
				imgs:"",
				array: ['返款问题', '快递问题', '礼品问题','任务问题','订单失效','晒错评价','其他问题'],
				index: 0,
				init:true,//初始化申诉类型
				imglist:[],//base64图片
				isSlectedImg:false,//是否上传图片
				localImgList:[],//本地图片路径
				customerTaskId:"",//任务id
			}
		},
		onLoad(options) {
			this.customerTaskId = options.customerTaskId;
			this.apptoken = uni.getStorageSync("apptoken");
		},
		methods: {
			bindPickerChange(e) {
					this.index = e.target.value;
					this.init = false;
			},
			selectType(type){
				this.type = type;
			},
			cancleImg(){
				this.isSlectedImg = false;
				this.imglist = [];
				this.localImgList = [];
			},
			seeImg(index){
				uni.previewImage({
						urls: this.localImgList,
						current:index,
						indicator:"number",
						loop:true,
				});
			},
			submitForm(){
				const _this = this;
				if(this.init){
					this.$CommonJS.showToast("请选择申诉类型");
					return;
				}
				if(!this.contentText){
					this.$CommonJS.showToast("请详细描述你的问题");
					return;
				}
				if(this.imglist.length<1){
					this.$CommonJS.showToast("请上传凭证");
					return;
				}
				let data = {
							apptoken:this.apptoken,
							content:encodeURI(this.contentText),
							appealType:this.index,
							appealTypeName:encodeURI(this.array[this.index]),
							customerTaskId:this.customerTaskId,
							imgUrl1:this.imglist[0]?this.imglist[0]:"",
							imgUrl2:this.imglist[1]?this.imglist[1]:"",
							imgUrl3:this.imglist[2]?this.imglist[2]:"",
							imgUrl4:this.imglist[3]?this.imglist[3]:"",
						}
				//console.log(data)
				uni.request({
					url:this.$API.URL + this.$API.order_appeal,
					data:data,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					success(resp){
						console.log(resp);
						if(resp.data.success){
							uni.showToast({
								title:"提交申诉成功",
							})
							_this.contentText = "";
							_this.imglist = [];
							_this.localImgList = [];
							_this.init = true;
							_this.index = 0;
							_this.isSlectedImg = false;
						}else{
							_this.$CommonJS.showToast(resp.data.msg)
							// uni.showToast({
							// 	title:,
							// 	icon:"none"
							// })
						}
					}
				})
				// 	uni.request({
				// 			url:this.$API.URL + this.$API.order_appeal,
				// 			data:data,
				// 			method:"POST",
				// 			header:{
				// 				'content-type':'application/x-www-form-urlencoded'
				// 			},
				// 			success(resp) {
				// 				console.log(resp)
				// 				if(resp.data.success){
									
				// 					uni.showToast({
				// 						title:"提交申诉成功",
				// 						icon:"success"
				// 					})
				// 					_this.contentText = "";
				// 					_this.imglist = [];
				// 				}else{
				// 					uni.showToast({
				// 						title:resp.data.msg,
				// 						icon:"none"
				// 					})
				// 				}
				// 			}
				// 	})
			
				
			},
			closeImgs(){
				let _this = this;
				this.imglist = [];
				this.localImgList = [];
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
							//console.log(JSON.stringify(res.tempFilePaths));
							_this.isSlectedImg = true;
							//#ifdef APP-PLUS
								res.tempFilePaths.forEach(item=>{
									uni.getImageInfo({
											src: item,
											success: function (image) {
												_this.localImgList.push(image.path);
													pathToBase64(image.path)
													  .then(base64 => {
													    //console.log(base64)
															_this.imglist.push(base64)
													  })
													  .catch(error => {
													    console.error(error)
													  })
											}
									});
								})
							//#endif
					}
				})
			}
		}
		
	}
</script>

<style>
	@import url("sub-appealing.css");
</style>
